<template>
  <div>
    <h3>案例-渲染几个分类</h3>
    <hr />
    <Cate title="美食">
      <!-- <ul slot-scope="scope"> -->
      <!-- 为了不去通过打点使用数据，则需要解构，但是不是绑定属性 -->
      <ul slot-scope="{ arr }">
        <!-- {{ obj.arr }}  /  {{ arr }} -->
        <li v-for="item in arr" :key="item">
          <span>{{ item }}</span>
        </li>
      </ul>
    </Cate>

    <Cate title="电影">
      <!-- 使用指令的方式解构出对应插槽的属性 -->
      <!-- v-slot="" 是作用域插槽的写法 -->
      <!-- <template v-slot:demo="{ num, list }"> -->
      <template #demo="{ num, list }">
        <p>{{ num }}</p>
        <ul>
          <li v-for="item in list" :key="item">
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>
    </Cate>

    <Cate title="游戏">
      <ul>
        <li v-for="item in gameArr" :key="item">
          <span>{{ item }}</span>
        </li>
      </ul>
    </Cate>

    <!-- <cate title="随便"></cate> -->
  </div>
</template>

<script>
import Cate from '../components/Cate.vue'

export default {
  data() {
    return {
      foodUrl: 'https://s3.ax1x.com/2021/01/16/srJlq0.jpg',
      gameArr: ['英雄联盟手游', '劲舞团', '红色警戒'],
      movieUrl: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
    }
  },
  components: {
    Cate
  }
}
</script>

<style lang="less" scoped></style>
